<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="/common/taglibs.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery Template JSP</title>
    
	<link type="text/css" rel="stylesheet" href="common/css/content.css" />
	<link type="text/css" rel="stylesheet" href="common/css/milk.css" />
	<link type="text/css" rel="stylesheet" href="common/css/overlay.css" />
	<link type="text/css" rel="stylesheet" href="script/jQuery1.7.2/jqGrid/css/ui.jqgrid.css" />
	<link type="text/css" rel="stylesheet" href="script/jQuery1.7.2/themes/redmond/jquery-ui.css" />
	<link type="text/css" rel="stylesheet" href="script/jQuery1.7.2/ztree/css/zTreeStyle.css" type="text/css">
	<link type="text/css" rel="stylesheet" href="script/jQuery1.7.2/fancyBox/css/jquery.fancybox.css" type="text/css">
	<link type="text/css" rel="stylesheet" href="script/jQuery1.7.2/fancyBox/css/jquery.fancybox-thumbs.css" type="text/css">
	
	<script type="text/javascript" src="script/jQuery1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/ui/jquery-ui.min.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/blockUI/jquery.blockUI.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/validate/jquery.validate.min.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/jqGrid/jquery.jqGrid.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/jQueryTools/jquery.tools.min.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/ztree/jquery.ztree.core-3.2.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/fancyBox/jquery.fancybox.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/fancyBox/plugin/jquery.mousewheel-3.0.6.pack.js"></script>
	<script type="text/javascript" src="script/jQuery1.7.2/fancyBox/plugin/jquery.fancybox-thumbs.js"></script>

	<link type="text/css" rel="stylesheet" href="unitTests/console.css" />
	<script type="text/javascript" src="unitTests/console.js"></script>
	<script type="text/javascript" src="unitTests/testRunner.js"></script>

	<script type="text/javascript">
	</script>
</head>
  
<body>

<div id="loginForm" style="display:none">
    <p><label>Username:</label><input type="text" name="username" /></p>
    <p><label>Password:</label><input type="text" name="password" /></p>
</div>

	<div class="spec-widget">
		<label>ButtonSet</label>
		<div class="group" id="buttonSet">
			<label>Button Test</label>
				<button>A button element</button>
				<input type="submit" value="A submit button"/>
				<a href="javascript:void(0);" >An anchor</a>
		</div>
	</div>

	<div class="spec-widget">
		<label>Sign Test</label>
		<div class="signupcontent">
		    <div id="signupbox">
		       <div id="signuptab">
		        <ul>
		          <li id="signupcurrent"><a href=" ">Signup</a></li>
		        </ul>
		      </div>
		      <div id="signupwrap">
		      		<form id="signupform" autocomplete="off" method="get" action="">
			  		  <table>
			  		  <tr>
			  		  	<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
			  		  	<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
			  		  	<td class="status"></td>
			  		  </tr>
			  		  <tr>
			  			<td class="label"><label id="llastname" for="lastname">Last Name</label></td>
			  			<td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" /></td>
			  			<td class="status"></td>
			  		  </tr>
			  		  <tr>
			  			<td class="label"><label id="lusername" for="username">Username</label></td>
			  			<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
			  			<td class="status"></td>
			  		  </tr>
			  		  <tr>
			  			<td class="label"><label id="lpassword" for="password">Password</label></td>
			  			<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
			  			<td class="status"></td>
			  		  </tr>
			  		  <tr>
			  			<td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password</label></td>
			  			<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
			  			<td class="status"></td>
			  		  </tr>
			  		  <tr>
			  			<td class="label"><label id="lemail" for="email">Email Address</label></td>
			  			<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
			  			<td class="status"></td>
			  		  </tr>
		              <tr>
			  			<td class="label"><label>Which Looks Right</label></td>
			  			<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
			  			<table>
			  				<tbody>
				  			<tr>
				  				<td style="padding-right: 5px;">
					  				<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
						            <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
				  				</td>
				  				<td style="padding-left: 5px;">
					  				<input id="dateformat_am" name="dateformat" type="radio" value="1"  />
						            <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
				  				</td>
				  				<td>
				  				</td>
				  			</tr>
			  				</tbody>
			  			</table>
			  			</td>
			  		  </tr>
		
			  		  <tr>
			  			<td class="label">&nbsp;</td>
			  			<td class="field" colspan="2">
				  			<div id="termswrap">
					  			<input id="terms" type="checkbox" name="terms" />
					            <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
				            </div> <!-- /termswrap -->
			  			</td>
			  		  </tr>
			  		  <tr>
			  			<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
			  			<td class="field" colspan="2">
			            <input id="signupsubmit" name="signup" type="submit" value="Signup" />
			  			</td>
			  		  </tr>
		
			  		  </table>
		          </form>
		      </div>
		    </div>
		</div>
	</div>
	
	<div class="spec-widget">
		<label>Accordion Test</label>
		<div id="accordion" style="width:60%;">
			<h3><a href="#">Section 1</a></h3>
			<div>
				<p>
				Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
				ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
				amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
				odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</p>
			</div>
			<h3><a href="#">Section 2</a></h3>
			<div>
				<p>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
				</p>
			</div>
			<h3><a href="#">Section 3</a></h3>
			<div>
				<p>
				Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
				Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
				ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
				lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
				</p>
				<ul>
					<li>List item one</li>
					<li>List item two</li>
					<li>List item three</li>
				</ul>
			</div>
			<h3><a href="#">Section 4</a></h3>
			<div>
				<p>
				Cras dictum. Pellentesque habitant morbi tristique senectus et netus
				et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
				faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
				mauris vel est.
				</p>
				<p>
				Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
				Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
				inceptos himenaeos.
				</p>
			</div>
		</div>
	</div>
	
	<div class="spec-widget">
		<label>jqGrid Test</label>
		<div class="group">
			<label>Grid Field</label>
			<button id="gridBtn">Load Grid</button>
			<div>
				<table id="gridGrouping"></table>
				<div id="pgridGrouping"></div>
			</div>
			
		</div>
	</div>
	
	<div class="spec-widget">
		<label>jQuery Tools Test</label>
		<div class="group">
			<label>Ball Exposure Test</label>
			
			<div style="margin:0 auto;width:300px">
			  <img src="common/images/overlay/ball_large.png" id="ball"
			       style="width:130px" />
			</div>
		</div>
		<div class="group">
			<label>Light Box Test</label>
			<div class="group">
			  <button rel="#petrol" type="button">petrol</button>
			  <button rel="#custom" type="button">custom</button>
			  <button rel="#custom2" type="button">custom <em>2</em></button>
			  <button rel="#apple" type="button">apple</button>
			</div>
			
			<!-- first overlay with id "petrol" -->
			<div class="overlay" id="petrol">
				<a class="close"></a>
				<h2 style="margin:0px">Here is my overlay</h2>
			
				<p>
				  <strong>Sit amet felis non sem eleifend rhoncus. Mauris imperdiet
				  consequat neque, ac molestie eros venenatis pharetra. In et leo
				  nulla. Vivamus feugiat consequat augue nec vulputate. Vestibulum a
				  ipsum et turpis viverra accumsan.</strong>
				</p>
			</div>
			
			<!-- second overlay with id "custom" -->
			<div class="overlay" id="custom" style="display:none;">
			  ...
			</div>
			 
			<!-- third overlay, background image can, of course, be defined with
			     the style attribute -->
			<div class="overlay" id="custom2"
			     style="background-image:url(common/images/overlay/flowplayer.png)">
			</div>
			 
			<!-- rest of the overlays ... -->
			<div class="overlay" id="apple"
			     style="background-image:url(common/images/overlay/apple.png)">
			</div>
		</div>
	</div>
	
	<div class="spec-widget">
		<label>ZTree Test</label>
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
	
	<div class="spec-widget">
		<label>Thumbnail helper Test</label>
		<div class="group">
			<a class="fancybox-thumbs" data-fancybox-group="thumb" href="common/images/overlay/4_b.jpg"><img src="common/images/overlay/4_s.jpg" alt="" /></a>
			<a class="fancybox-thumbs" data-fancybox-group="thumb" href="common/images/overlay/3_b.jpg"><img src="common/images/overlay/3_s.jpg" alt="" /></a>
			<a class="fancybox-thumbs" data-fancybox-group="thumb" href="common/images/overlay/2_b.jpg"><img src="common/images/overlay/2_s.jpg" alt="" /></a>
			<a class="fancybox-thumbs" data-fancybox-group="thumb" href="common/images/overlay/1_b.jpg"><img src="common/images/overlay/1_s.jpg" alt="" /></a>
		</div>
	</div>
	
	<div>==========================================================================</div>
	<div class="spec-widget">
		<label>Sign Test</label>
		<div class="group">
			<label>Text Field</label>
			<input type="text" value="This is text." />
			<input type="text" value="This is text." readonly="readonly" />
			<input type="text" value="This is text." disabled="disabled" />
		</div>
	</div>
</body>
</html>
